<template>
  <div id="building">
      <el-container>
          <el-header style="background-color: #E79335;position: relative" height="40px">
          <div>
              <el-input v-model="inputfirst" style=" margin-top: 6px;margin-left: 400px;width: 400px; height: 25px;position: absolute" placeholder="" >
                  <template #append>
                      <el-icon><Search /></el-icon>
                  </template>
              </el-input>
          </div>
          <div style="position: absolute;margin-left: 810px">
              <el-avatar
                      :src="require('../img/person2.jpg')"
                      size="small"
                      style="margin-top: 7px;"
                      @click="userdetail"
              />
          </div>

          <div style="position: absolute;margin-left: 840px;margin-top: 6px">
              <span @click="userdetail" style="font-size: 0.8em;color: white">用户名</span>
          </div>

          <div style="position: absolute;margin-left: 1000px;margin-top: 10px;color: white;font-size: 0.8em;">
              <span @click="shouye">首页</span>
              <el-divider direction="vertical"></el-divider>
              <span>搜索好友</span>
              <el-divider direction="vertical"></el-divider>
          </div >
          <div style="position: absolute;margin-left: 1130px;margin-top: 6px;">
              <el-image style="width: 25px;height: 25px;"
                        :src="require('../img/haoyou.svg')"></el-image>
              <el-image style="width: 25px;height: 25px;margin-left: 3px"
                        :src="require('../img/duanxin.svg')"></el-image>

              <el-image style="width: 23px;height: 23px;margin-left: 8px"
                        :src="require('../img/xinfeng.svg')"></el-image>

          </div>

          <div  style="position: absolute;margin-left: 1220px;margin-top: 8px">
              <el-divider direction="vertical"></el-divider>
              <el-dropdown>
                <span class="el-dropdown-link">
                    <el-image style="width: 23px;height: 23px;margin-left: 6px"
                              :src="require('../img/help.svg')"></el-image>
                 <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
             </span>
                  <template #dropdown>
                      <el-dropdown-menu>
                          <el-dropdown-item>健康</el-dropdown-item>
                          <el-dropdown-item>动态记录</el-dropdown-item>
                          <el-dropdown-item>动态消息偏好设置</el-dropdown-item>
                          <el-dropdown-item>设置</el-dropdown-item>
                          <el-dropdown-item divided @click="tuichu">退出</el-dropdown-item>
                      </el-dropdown-menu>
                  </template>
              </el-dropdown>
          </div>
      </el-header>
      </el-container>
      <div id="imgbackground">
          <el-card id="cardcss">
                  <div>
                      <div style="float:left;">
                          <el-avatar
                                  :src="require('../img/docter1.jpg') "
                          />
                      </div>
                      <div style="float: right">
                          <el-icon><MoreFilled /></el-icon>
                      </div>

                      <div style="float:left;">
                          <el-text style="font-family: 楷体;font-size: large;">
                              莫彦翔（教授）
                          </el-text>
                      </div>
                      <br>
                      <div>
                          <el-text style="font-size: smaller; color: #CCCCCC">
                              8分钟
                          </el-text>
                      </div>

                  </div>
                  <br>
                  <div>
                      <el-text style="font-family: 黑体;color: #121212;font-weight: bolder">
                          自闭症患者的症状都有哪些呢？
                      </el-text>
                  </div>
                  <div>
                      <el-text style="font-size: 0.5em; line-height: 10%">
                          众所周知，自闭症患者无论是对家庭，还是对社会来说，都是一个沉重的负担，但是如果发现的早，病情还是可以扭转的。大家可以来分享分享自闭症患者的症状，避免有些自闭症患者的家人因为对该病的早期症状不了解，所以耽误了患者病情的治疗。
                      </el-text>
                  </div>
                  <div style="margin-top: 5px">
                      <el-avatar size="small" :src="require('../img/person1.jpg') "></el-avatar>
                      <el-avatar size="small" :src="require('../img/person2.jpg') "></el-avatar>
                      <el-avatar size="small" :src="require('../img/person6.jpg') "></el-avatar>
                      <el-text style="font-size: 0.5em;margin-top: 4px">+163个赞</el-text>
                      <div style="float: right">
                          <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/like.svg')"></el-image>
                          <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/pinglun.svg')"></el-image>
                          <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/share.svg')"></el-image>
                      </div>
                      <div style="margin-top: 20px">
                          <el-avatar   :src="require('../img/person1.jpg') "></el-avatar>
                          <el-card
                                  style="background-color: #F2F2F2;width: 250px;margin-left: 50px;margin-top: -40px">
                             <div style="font-size: 0.1em;margin-top: -10px">
                              <el-text size="small">根据我的经验来讲，如果你家的孩子语言发展迟缓和有障碍，说话内容，速度，及音调异常，你就得提高警惕了。</el-text>
                             </div>
                          </el-card>
                      </div>

                      <div style="margin-top: 20px">
                          <el-avatar   :src="require('../img/person15.jpg') "></el-avatar>
                          <el-card
                                  style="background-color: #F2F2F2;width: 250px;margin-left: 50px;margin-top: -40px">
                              <div style="font-size: 0.1em;margin-top: -10px">
                                  <el-text size="small">The more obvious symptoms are:Due to communication difficulties and failure to adapt to changes, they are more likely to be stimulated by emotional or environmental factors and exhibit impulsive or harmful behaviors.</el-text>
                              </div>
                          </el-card>
                      </div>


                      <el-input v-model="input2" style="margin-top: 100px" placeholder="写下评论">
                          <template #append>
                              <el-image style="width: 25px;height: 25px;"
                                        :src="require('../img/smile.svg')"></el-image>

                          </template>
                      </el-input>
                  </div>
          </el-card>
      </div>
  </div>

</template>

<script>
export default {
    name: "postDetail",
    data(){
        return {
            inputfirst:'',
            input2:'',
        }
    },
    methods:{
        shouye(){
            this.$router.push('home')
        },
        userdetail(){
            this.$router.push('/user')
        },
    }
}
</script>

<style scoped>
#building{
    background-color: #666666;
    width:100%;
    height:100%;
    position: fixed;
    background-size:100% 100%;
}
#imgbackground{
    background: url("../img/shouyetiezi.jpg");
    margin-left: 150px;
    margin-top: 10px;
    width:1200px;
    height: 650px;
    background-size:100% 100%;
}
#cardcss{
    height:  650px;
    width: 350px;
    margin-left: 900px;
    margin-top: 0px;
}
</style>
